<template>
<div>
    <img class="bimg" src="../assets/images/register.jpg"/>
    <span class="exit">X</span>
    <div class="big">
        <h2>手机号注册</h2><br> 
        <form>
            <input class="textarea1" type="text" v-model="uname" name="uname" placeholder="用户名">
            <img v-show="name_show" :src="require(`../assets/loginIMG/${name_check}.png`)" alt="">

            <input class="textarea1" type="password" v-model="upwd" name="pwd1" placeholder="密码">
            <img v-show="pwd_show" :src="require(`../assets/loginIMG/${pwd_check}.png`)" alt="">

            <input class="textarea1" type="password" v-model="upwd2" name="pwd2" placeholder="确认密码">
            <img v-show="pwdd_show" :src="require(`../assets/loginIMG/${pwdd_check}.png`)" alt="">
 
            <input class="textarea1" type="tel" v-model="utel" name="phone" placeholder="手机号">
            <img v-show="tel_show" :src="require(`../assets/loginIMG/${tel_check}.png`)" alt="">

            <input class="textarea1" type="email" v-model="uemail" name="email" placeholder="邮箱">
            <img v-show="email_show" :src="require(`../assets/loginIMG/${email_check}.png`)" alt="">

            <input class="checkg" type="checkbox" name="agreement" value="agree">我已阅读并同意
            <a class="checkg ina" href="#" target="_blank">阿狸之家用户注册协议和隐私政策</a>
            
            <button class="btn leftbtn" @click="sendReg">注册</button>
            <input type="reset" class="btn rightbtn" value="重置"/>
        </form>
        <span class="itxt">已经有账号了?&nbsp;<router-link class="checkg2" to="/login">登录</router-link>试试</span>
    </div>
</div>
</template>

<script>
import {Toast} from 'mint-ui'
import $ from 'jquery'
export default {
  name: 'Register',
  data () {
    return {
      name_check:'ok',
      pwd_check:'ok',
      pwdd_check:'ok',
      tel_check:'ok',
      email_check:'ok', 
      
      name_show:false,
      pwd_show:false,
      pwdd_show:false,
      tel_show:false,
      email_show:false,
      
      uname:'',
      upwd:'',
      upwd2:'',
      utel:'',
      uemail:'',
      bool:false
    }
  },
  mounted () {
     $("input:eq(0)").blur(()=>{
        var unameTest=/^[a-zA-Z\u4e00-\u9fa51-9]{2,}$/;
        if(unameTest.test(this.uname)){ 
            this.name_show=true;
            this.name_check='ok';
        }else{
            this.name_show=true;
            this.name_check='err';
        }
    })
    $("input:eq(1)").blur(()=>{
        var upwdTest=/^[A-Za-z0-9_]{6,}$/;
        if(upwdTest.test(this.upwd)){ 
            this.pwd_show=true;
            this.pwd_check='ok';
        }else{
            this.pwd_show=true;
            this.pwd_check='err';
        }
    })
    $("input:eq(2)").blur(()=>{
        if(this.upwd==this.upwd2&&this.upwd2!=''){
            this.pwdd_show=true;
            this.pwdd_check='ok';
        }else{
            this.pwdd_show=true;
            this.pwdd_check='err';
        }
    })
    $("input:eq(3)").blur(()=>{
        var ttel=/^[1][3,4,5,7,8][0-9]{9}$/;
        if(ttel.test(this.utel)){ 
            this.tel_show=true;
            this.tel_check='ok'
        }else{
            this.tel_show=true;
            this.tel_check='err';
        }
    })
    $("input:eq(4)").blur(()=>{
        var tema=/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
        if(tema.test(this.uemail)){ 
            this.email_show=true;
            this.email_check='ok';
        }else{
            this.email_show=true;
            this.email_check='err';
        }
    })
    $('.checkg').change(function(){
      this.bool=$(this).prop('checked');
      if(!this.bool){
        Toast({message:'请同意阿狸之家官方协议',position:'top',duration:1000});
      }
    })
    
  },
  methods:{
    sendReg(e){
      this.bool=$('.checkg').prop('checked')
      e.preventDefault();
      if(this.name_check=='ok'&&this.pwd_check=='ok'&&this.pwdd_check=='ok'&&this.tel_check=='ok'&&this.email_check=='ok'&&this.bool==true){
         $('.leftbtn').submit();
         $.ajax({
          url: "http://localhost/register.php",
          type: "post",
          data: { uname: this.uname, upwd: this.upwd,utel: this.utel,uemail: this.uemail},
          success: (result) => {  
            if(result.code==1){
              Toast({message:`恭喜${this.uname},注册成功`,position:'top',duration:1000});
              this.$router.push({path:'/login',name:'Login',params:{uname:this.uname}});
            }else{
              Toast({message:'该用户名已注册',position:'top',duration:1000});
            }
          }}) 
      }else{
        Toast({message:'输入有误,Sorry',position:'top',duration:1000});
      }
   }
  }   
}
</script>

<style scoped>
.imgs{
  background-image: url(../assets/loginIMG/ok.png)
}
.exit{
	color: rgba(7, 7, 7, 0.2);
	margin: 0;
	position: absolute;
	left: 900px;
	top:25px;
  font-size: 16px;
  cursor: pointer;
	z-index: 9;
}
.bimg{
  width: 100%;
  height: 620px;
}
a{
	text-decoration: none;
}
.big{
    font-family:serif;
	font-size:16px;
	width:520px;
	position:absolute;
	top:20px;
	left:30%;
	border-color:rgb(25, 25, 26);
	border-radius:5px 5px 5px 5px;
	box-shadow:0px 0px 10px 10px rgba(100, 99, 99, 0.2);
	border-style:shadow;
	padding-left:50px;
	padding-right:50px;
	padding-top:50px;
	padding-bottom:55px;
	background-color:white;
	z-index:1;
}

h2{
	margin: -10px;
	color:rgb(80,80,80);
	text-align:center;
	font-size:25px;
}

.itxt{
	position:absolute;
	bottom:10px;
	margin-left:160px;
	font-size:12px;
}
input:focus{
	outline:none;
}
.textarea1{
	width:350px;
	height:50px;
	font-size:16px;
	margin-left: 45px;
	padding-left:10px;
	border-style:none;
	border-width:1px;
	border-color:rgb(250,250,250);
	border-radius:5px 5px 5px 5px;
	background-color:rgb(216, 211, 211);
	margin-top:10px;
	margin-bottom: 10px;
}
.noshow{
	display: inline-block;
	font-size: 5px;
	color: #8a2a2a;
}
.checkg{
	margin-top: 20px;
	margin-left: 20px;
}
.ina{
	margin-left: 3px;
}
.btn{
	margin-top: 20px;
}
.rightbtn{
	margin-left: 120px;
	color:white;
	border:none;
	width:70px;
	height:40px;
  cursor: pointer;
	background-color:rgb(71, 68, 68);
}
.leftbtn{
	margin-left: 90px;
	color:white;
	border:none;
	width:70px;
	height:40px;
  cursor: pointer;
	background-color:rgb(90, 221, 90);
}
input{
	font-family:Monospace;
}

.checkg:link{
	color:rgb(207, 88, 41);
	}
a:visited{
	color:rgb(200,0,0);
	}
.checkg2:link{
	color:rgb(199, 74, 52);
}
.noshow{
	display: none;
	margin-left: 10%;
}

</style>
